const path = require('path');
const webpack= require('webpack');
//引用  插件
//作用: 1.使用插件之后,不需要手动链接 bundle.js文件
//2.使用插件之后,自动引用内存中的html页面
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoader = require('vue-loader');
const { VueLoaderPlugin } = require('vue-loader');
module.exports={ //entry 入口 output输出
    entry:path.join(__dirname,'./src/main.js'), //需要打包的文件 入口
    output:{
        path: path.join(__dirname,'./dist'), //打包之后 输出到文件夹
        filename:'bundle.js' //打包之后  生产的文件名
    },
       devServer:{
           open:'chrome',
        //    port:4787,
           contentBase:'src',
           hot:true //热更新  只需要更新   用于更改的内容 --- 启动热更新 第1步
       },
       plugins:[
          new webpack.HotModuleReplacementPlugin(), //启动热更新第3步  new  热更新的模块
          new htmlWebpackPlugin({
              template: path.join(__dirname,'./src/index.html'),//需要创建的一个模板
              filename:'index.html' //内存中创建html页面
          }),
          new VueLoaderPlugin()
       ],
       module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']}, // use 中加载器执行的顺序,右往左执行,先执行css-loader 在执行 style-loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //limit 限制  限定,用于 ---  指定图片大小,[name]表示获取背景图片的名称,[ext]获取图片的后缀名,[hash:5]表示设置5位哈希编码
            {test:/\.(jpg|png|gif|jpeg|bmp)$/,use:'url-loader?limit=10895&name=[hash:5]-[name].[ext]'},
            {test:/\.(ttf|svg|dot|woff|woff2|font|ttc|eot)$/,use:'url-loader'},
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            {test:/\.vue$/,use:'vue-loader'}
             
    
        ] 
    },
      resolve:{
          alias:{
            //   "vue$":"vue/dist/vue.js"
          }
      }      
}
